跳到主要内容

ECharts 图表集成指南

概述​

本文档介绍 A1 平台与 ECharts 集成的相关接口函数及参数定义。ECharts 是一个强大的数据可视化库，通过本集成可以快速生成各类图表配置及完整的 HTML 页面。

一、echarts​

功能说明​

生成 ECharts 图表配置数据，支持折线图和柱状图两种类型。

输入参数​

参数名类型必填说明
typeString*图表类型，支持 line（折线图）或 bar（柱状图）
dataString*数据数组，包含整数类型的数值
x_axisString*X 轴数据数组，包含字符串类型的标签
titleString-图表的标题
smoothString-布尔值，表示是否对折线图进行平滑处理

输出参数​

参数名类型说明
resultString符合 ECharts 配置格式的 JSON 字符串，可直接用于前端 ECharts 实例渲染

配置示例与预览​

{
  "title": { "text": "销售数据趋势" },
  "xAxis": { "data": ["一月", "二月", "三月", "四月"] },
  "yAxis": {},
  "series": [{
    "name": "销量",
    "type": "line",
    "data": [120, 200, 150, 280],
    "smooth": true
  }]
}

二、echarts_pie​

功能说明​

生成 ECharts 饼图（Pie Chart）的配置数据，适用于展示数据占比和分布情况。

输入参数​

参数名类型必填说明
dataString*数据数组，每个元素包含 name(String) 和 value(Integer)
nameString*饼图系列的名称，通常用于图例显示
titleString-图表的标题

输出参数​

参数名类型说明
resultString符合 ECharts 饼图配置格式的 JSON 字符串

数据格式​

字段类型说明
nameString数据项名称
valueInteger数据项数值

配置示例与预览​

{
  "title": { "text": "产品销售占比" },
  "series": [{
    "name": "销售来源",
    "type": "pie",
    "data": [
      { "name": "直接访问", "value": 335 },
      { "name": "邮件营销", "value": 310 },
      { "name": "联盟广告", "value": 234 },
      { "name": "视频广告", "value": 135 }
    ]
  }]
}

三、echarts_gen_html​

功能说明​

将 ECharts 图表配置生成完整的 HTML 页面，适用于需要动态生成可视化页面的场景。

输入参数​

参数名类型必填说明
input_jsonString*符合 ECharts 配置格式的 JSON 对象

输出参数​

参数名类型说明
resultString完整的 HTML 字符串，包含嵌入的 ECharts 配置脚本

输出特点​

  • 完整的 HTML5 页面结构
  • 内嵌 ECharts CDN 引用
  • 自动响应式布局
  • 可直接在浏览器或A1 End节点中打开

四、使用示例​

4.1 生成折线图流程​

4.2 生成饼图流程​

4.3 完整可视化方案​

五、典型应用场景​

场景推荐接口说明
数据看板echarts + echarts_gen_html生成折线图展示趋势数据
报表分析echarts_pie展示数据分布和占比
动态图表echarts返回 JSON 配置，前端动态渲染
快速预览echarts_gen_html一键生成可独立运行的 HTML 页面

六、图表类型对照​

图表类型接口type 参数值
折线图echartsline
柱状图echartsbar
饼图echarts_pie-

七、注意事项​

项目说明
数据格式data 和 x_axis 需要是符合 JSON 格式的字符串
字符编码生成的 HTML 默认使用 UTF-8 编码
依赖资源HTML 页面使用 CDN 引入 ECharts 库，需要网络连接
浏览器兼容支持现代浏览器（Chrome、Firefox、Safari、Edge）
性能建议大数据量场景建议使用数据聚合或抽样

八、快速开始​

基础折线图示例​

饼图示例​

九、交互式编辑器​

您可以在此处实时编辑和预览 ECharts 图表配置。点击顶部标签切换图表类型，修改左侧 JSON 配置，右侧图表将实时更新。

修改下方 JSON 配置，图表将实时更新

实时预览

如需更多帮助，请参考 ECharts 官方文档 或联系技术支持。